إدارة عرض واجهة برمجة تطبيقات العرض التقديمي للواجهة الأمامية: تكوين الشاشات المتعددة للتطبيقات العالمية

في عالمنا المترابط اليوم، لم تعد تطبيقات الويب محصورة في نافذة متصفح واحدة. توفر واجهة برمجة تطبيقات العرض التقديمي للواجهة الأمامية (Frontend Presentation API) للمطورين قدرة قوية على توسيع تطبيقاتهم عبر شاشات متعددة، مما يفتح ثروة من الفرص لتجارب مستخدم محسنة. سيستكشف هذا الدليل تعقيدات واجهة برمجة تطبيقات العرض التقديمي، مع التركيز بشكل خاص على تكوين الشاشات المتعددة، وتقديم أمثلة عملية ذات صلة بجمهور عالمي.

فهم واجهة برمجة تطبيقات العرض التقديمي

واجهة برمجة تطبيقات العرض التقديمي هي معيار ويب يمكّن تطبيقات الويب من استخدام شاشة ثانوية، أو شاشة عرض تقديمي، لعرض محتوى مختلف عن الشاشة الأساسية. وهذا مفيد بشكل خاص في سيناريوهات مثل:

• غرف الاجتماعات: مشاركة العروض التقديمية من جهاز كمبيوتر محمول إلى جهاز عرض (بروجيكتور).
• أكشاك البيع بالتجزئة: عرض معلومات المنتج على شاشة كبيرة بينما يتفاعل المستخدم مع شاشة لمس أصغر.
• اللافتات الرقمية: بث محتوى ديناميكي عبر شاشات متعددة في الأماكن العامة.
• الألعاب: توسيع تجربة اللعبة إلى شاشة ثانوية لتعزيز الانغماس أو توفير معلومات إضافية.
• البيئات التعليمية: عرض المواد التعليمية على شاشة كبيرة بينما يعمل الطلاب على أجهزة فردية.

تتمحور واجهة برمجة التطبيقات حول المفاهيم الأساسية التالية:

• PresentationRequest: كائن يستخدم لبدء جلسة عرض تقديمي.
• PresentationConnection: كائن يمثل الاتصال بين الصفحة المتحكمة وصفحة العرض.
• PresentationReceiver: كائن في صفحة العرض يستقبل الرسائل من الصفحة المتحكمة.

إعداد تكوين الشاشات المتعددة

الخطوة الأولى في استخدام واجهة برمجة تطبيقات العرض التقديمي هي اكتشاف الشاشات المتاحة وبدء جلسة عرض تقديمي. إليك تفصيل للعملية:

1. اكتشاف الشاشات المتاحة

تعيد الدالة navigator.presentation.getAvailability() وعدًا (promise) يتم حله بكائن PresentationAvailability. يشير هذا الكائن إلى ما إذا كانت شاشة العرض التقديمي متاحة حاليًا.

            
navigator.presentation.getAvailability()
  .then(function(availability) {
    if (availability.value) {
      console.log('Presentation display is available.');
    } else {
      console.log('Presentation display is not available.');
    }

    availability.onchange = function() {
      if (availability.value) {
        console.log('Presentation display became available.');
      } else {
        console.log('Presentation display became unavailable.');
      }
    };
  });

            

              
                Copy
              
            
          

يتحقق هذا المقتطف البرمجي مما إذا كانت شاشة العرض التقديمي متاحة ويستمع إلى التغييرات في توفرها. من المهم التعامل مع حدث onchange للتفاعل ديناميكيًا مع التغييرات في توفر شاشات العرض التقديمي.

2. بدء جلسة عرض تقديمي

لبدء عرض تقديمي، قم بإنشاء كائن PresentationRequest، مع توفير عنوان URL لصفحة العرض التقديمي.

            
let presentationRequest = new PresentationRequest(['presentation.html']);

presentationRequest.start()
  .then(function(connection) {
    console.log('Presentation started successfully.');
    // Handle the presentation connection
    connection.onmessage = function(event) {
      console.log('Received message:', event.data);
    };
    connection.onclose = function() {
      console.log('Presentation closed.');
    };
    connection.onerror = function(event) {
      console.error('Presentation error:', event.error);
    };
  })
  .catch(function(error) {
    console.error('Failed to start presentation:', error);
  });

            

              
                Copy
              
            
          

يبدأ هذا الرمز جلسة عرض تقديمي باستخدام presentation.html كمحتوى لعرضه على الشاشة الثانوية. ثم ينشئ اتصالًا ويقوم بإعداد مستمعي الأحداث للرسائل والإغلاق والأخطاء.

3. صفحة العرض التقديمي (PresentationReceiver)

يجب تجهيز صفحة العرض التقديمي لاستقبال الرسائل من الصفحة المتحكمة. يتم تحقيق ذلك باستخدام كائن PresentationReceiver.

            
navigator.presentation.receiver.connectionList.then(function(connectionList) {
  connectionList.connections.forEach(function(connection) {
    console.log('Received connection:', connection);
    connection.onmessage = function(event) {
      document.body.innerHTML = '
' + event.data + '
';
    };
  });

  connectionList.onconnectionavailable = function(event) {
    let connection = event.connection;
    console.log('New connection available:', connection);
    connection.onmessage = function(event) {
      document.body.innerHTML = '
' + event.data + '
';
    };
  };
});

            

              
                Copy
              
            
          

يستمع هذا المقتطف البرمجي للاتصالات الواردة في صفحة مستقبل العرض ويتعامل مع الرسائل المستلمة من الصفحة المتحكمة، محدثًا محتوى شاشة العرض التقديمي وفقًا لذلك.

تكوين متقدم للشاشات المتعددة

إلى جانب وظائف العرض التقديمي الأساسية، تسمح واجهة برمجة تطبيقات العرض التقديمي بتكوينات أكثر تعقيدًا للشاشات المتعددة. إليك بعض التقنيات المتقدمة:

1. اختيار شاشة محددة

لا توفر واجهة برمجة تطبيقات العرض التقديمي طريقة مباشرة لسرد الشاشات المتاحة واختيار شاشة محددة. ومع ذلك، يمكنك استخدام مُنشئ PresentationRequest مع مصفوفة من عناوين URL. سيقوم وكيل المستخدم بعد ذلك بعرض أداة اختيار للمستخدم، مما يسمح له باختيار الشاشة التي يريد استخدامها.

2. تحديثات المحتوى الديناميكية

تتيح دالة PresentationConnection.postMessage() الاتصال في الوقت الفعلي بين الصفحة المتحكمة وصفحة العرض. يسمح هذا بتحديثات ديناميكية لمحتوى العرض بناءً على تفاعلات المستخدم أو تغييرات البيانات.

            
// Sending a message from the controlling page
connection.postMessage('Hello, presentation display!');

// Receiving the message on the presentation page
navigator.presentation.receiver.connectionList.then(function(connectionList) {
  connectionList.connections.forEach(function(connection) {
    connection.onmessage = function(event) {
      document.body.innerHTML = '
' + event.data + '
';
    };
  });
});

            

              
                Copy
              
            
          

يوضح هذا المثال إرسال رسالة نصية بسيطة من الصفحة المتحكمة إلى صفحة العرض، والتي تقوم بعد ذلك بتحديث محتواها.

3. التعامل مع دقات الشاشة ونسب العرض إلى الارتفاع المختلفة

عند عرض المحتوى على شاشات متعددة، من الضروري مراعاة الدقات ونسب العرض إلى الارتفاع المختلفة للشاشات. استخدم استعلامات وسائط CSS والتخطيطات المرنة لضمان تكيف المحتوى الخاص بك بسلاسة مع أحجام الشاشات المختلفة. ضع في اعتبارك استخدام وحدات منفذ العرض (vw, vh, vmin, vmax) لتغيير حجم العناصر بشكل متناسب مع حجم الشاشة.

            
/* Example CSS for handling different screen sizes */
@media (min-aspect-ratio: 16/9) {
  .content {
    width: 80vw;
    height: 90vh;
  }
}

@media (max-aspect-ratio: 4/3) {
  .content {
    width: 90vw;
    height: 75vh;
  }
}

            

              
                Copy
              
            
          

يستخدم مثال CSS هذا استعلامات الوسائط لضبط أبعاد عنصر المحتوى بناءً على نسبة العرض إلى الارتفاع للشاشة.

4. التدويل والتعريب

بالنسبة للتطبيقات العالمية، من الضروري مراعاة التدويل (i18n) والتعريب (l10n). استخدم علامات اللغة المناسبة في HTML الخاص بك، وقدم ترجمات لجميع المحتوى النصي، ونسق التواريخ والأرقام والعملات وفقًا لإعدادات المستخدم المحلية. يمكن أن تكون واجهة برمجة تطبيقات التدويل (Intl) في جافاسكريبت مفيدة جدًا لهذا الغرض.

            
// Formatting a number according to a specific locale
let number = 1234567.89;
let formattedNumber = new Intl.NumberFormat('de-DE').format(number); // Output: 1.234.567,89

// Formatting a date according to a specific locale
let date = new Date();
let formattedDate = new Intl.DateTimeFormat('ja-JP').format(date); // Output: 2023/10/27

            

              
                Copy
              
            
          

توضح هذه الأمثلة كيفية تنسيق الأرقام والتواريخ وفقًا لإعدادات محلية مختلفة باستخدام واجهة برمجة تطبيقات Intl.

5. اعتبارات إمكانية الوصول

تأكد من أن تطبيقاتك متعددة الشاشات متاحة للمستخدمين ذوي الإعاقة. قدم نصًا بديلاً للصور، واستخدم HTML الدلالي، وتأكد من أن تطبيقك قابل للتنقل باستخدام لوحة المفاتيح. ضع في اعتبارك استخدام سمات ARIA لتعزيز إمكانية الوصول للمحتوى الديناميكي.

أمثلة عملية للتطبيقات العالمية

فيما يلي بعض الأمثلة العملية لكيفية استخدام واجهة برمجة تطبيقات العرض التقديمي في التطبيقات العالمية:

• عروض المؤتمرات الدولية: تطبيق ويب يسمح للمقدمين بمشاركة الشرائح على جهاز عرض بينما يشاهدون ملاحظات المتحدث ويديرون العرض التقديمي على أجهزة الكمبيوتر المحمولة الخاصة بهم. يجب أن يدعم التطبيق لغات متعددة ويسمح للمقدمين بتخصيص تخطيط العرض لأحجام الشاشات المختلفة.
• أكشاك البيع بالتجزئة العالمية: تطبيق كشك يعرض معلومات المنتج على شاشة كبيرة بينما يسمح للمستخدمين بتصفح المنتجات وإجراء عمليات الشراء على شاشة لمس. يجب أن يدعم التطبيق عملات ولغات وطرق دفع متعددة.
• اللافتات الرقمية متعددة اللغات: نظام لافتات رقمية يعرض محتوى ديناميكيًا، مثل عناوين الأخبار وتحديثات الطقس والإعلانات، على شاشات متعددة في الأماكن العامة. يجب ترجمة المحتوى تلقائيًا إلى اللغة المحلية لكل شاشة.
• السبورة البيضاء التعاونية للفرق عن بعد: تطبيق سبورة بيضاء قائم على الويب يسمح للفرق الموزعة جغرافيًا بالتعاون في الوقت الفعلي. يمكن لشاشة ثانوية عرض رؤية مكبرة لمنطقة معينة، أو تقديم مواد مرجعية إضافية.

مثال برمجي: عرض تقديمي بسيط مع تحديثات ديناميكية

إليك مثال برمجي كامل يوضح عرضًا تقديميًا بسيطًا مع تحديثات ديناميكية:

الصفحة المتحكمة (index.html):

            



  


  
Controlling Page
  Start Presentation
  
  Send Message

  



            

              
                Copy
              
            
          

صفحة العرض التقديمي (presentation.html):

            



  
  


  
Presentation Display
  


  



            

              
                Copy
              
            
          

ينشئ هذا المثال صفحة تحكم بسيطة بها زر لبدء العرض التقديمي ومدخل نصي وزر لإرسال الرسائل إلى شاشة العرض التقديمي. تستقبل شاشة العرض الرسائل وتحدث محتواها وفقًا لذلك.

استكشاف الأخطاء الشائعة وإصلاحها

• عدم اكتشاف شاشة العرض التقديمي: تأكد من توصيل شاشة ثانوية وتمكينها في إعدادات نظام التشغيل. تحقق من توافق المتصفح وقم بالتحديث إلى أحدث إصدار.
• عدم بدء العرض التقديمي: تحقق من أن عنوان URL للعرض التقديمي صحيح ويمكن الوصول إليه. تحقق من وجود أي أخطاء في وحدة تحكم جافاسكريبت.
• عدم استلام الرسائل: تأكد من أن PresentationConnection قد تم إنشاؤه بشكل صحيح وأن مستمع حدث onmessage مهيأ بشكل صحيح في كل من الصفحة المتحكمة وصفحة العرض.
• مشكلات عبر المصادر (Cross-Origin): إذا كانت الصفحة المتحكمة وصفحة العرض مستضافتين على نطاقات مختلفة، فتأكد من أن CORS (مشاركة الموارد عبر المصادر) مهيأ بشكل صحيح للسماح بالاتصال بين المصادر.

مستقبل واجهة برمجة تطبيقات العرض التقديمي

واجهة برمجة تطبيقات العرض التقديمي هي تقنية تتطور باستمرار. قد تشمل التحسينات المستقبلية ما يلي:

• تحسين تعداد واختيار الشاشات.
• تحكم أكثر تطورًا في تخطيط وتصميم العرض التقديمي.
• ميزات أمان محسنة.
• التكامل مع واجهات برمجة تطبيقات الويب الأخرى، مثل WebXR لتجارب الواقع المعزز والافتراضي.

الخاتمة

توفر واجهة برمجة تطبيقات العرض التقديمي للواجهة الأمامية آلية قوية لتوسيع تطبيقات الويب عبر شاشات متعددة، مما يتيح مجموعة واسعة من تجارب المستخدم المبتكرة. من خلال فهم المفاهيم الأساسية لواجهة برمجة التطبيقات واتباع أفضل الممارسات الموضحة في هذا الدليل، يمكن للمطورين إنشاء تطبيقات متعددة الشاشات جذابة وفعالة لجمهور عالمي. من عروض المؤتمرات الدولية إلى اللافتات الرقمية متعددة اللغات، الاحتمالات لا حصر لها. اغتنم قوة واجهة برمجة تطبيقات العرض التقديمي واطلق العنان لإمكانيات تطبيقات الويب متعددة الشاشات.